<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#hd{
				width:300px;
				height:300px;
				background:red;
				position:absolute;
				top:30px;
			}
		</style>
		<!--<script>
			
			window.onload=function(){
				//抓元素
				hd=document.getElementById("hd");
				btn=document.getElementById("btn");
				//给按钮加单机样式
				btn.onclick=function(){
					//设置定时器，每隔一秒钟，将left的值变大10个像素
					var timer=setInterval(function(){
						//获得当前图片的left值：
						var old_left=hd.style.left;
						//计算新的left值
						var new_left=parseInt(old_left)+5;
						//将新值赋值回去
						hd.style.left=new_left+'px';
						//判断是否停止
						if(new_left==600)
						{
							clearInterval(timer);
						}
					},100)
				}
			}
		</script>-->
		<script src='jquery-3.4.1.js'></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					//linear表示匀速
					//$("#hd").animate({'left':'600px'},3000,'linear');
					$("#hd").animate({'left':'600px'},3000,function(){
						
					})
				})
			})
		</script>
	</head>
	<body>
		<input type="button" value="点我啊" id="btn"/>
		<div id="hd"style="left:0px;"></div>
	</body>
</html>
